/* 容器样式 */
.query-container {
    background: #fff;
    padding: 10px;
    margin:  0px 0px 5px 0px;
    /*       上   右   下  左*/
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 表单组布局 */
.form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* 表单项 */
.form-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* 标签样式 */
.form-label {
    width: 80px;
    text-align: right;
    margin-right: 12px;
    font-size: 14px;
    color: #333;
}

/* 输入控件 */
.form-input {
    width: 200px;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
}

/* 下拉菜单 */
/*.form-select {*/
/*    width: 200px;*/
/*    padding: 8px 12px;*/
/*    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;*/
/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/
/*    appearance: none;*/
/*}*/

/* 按钮组 */
.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* 基础按钮样式 */
.btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

/* 查询按钮 */
.btn-query {
    background: #409eff;
    color: white;
    border: 1px solid #409eff;
}

/* 重置按钮 */
.btn-reset {
    background: white;
    color: #666;
    border: 1px solid #dcdfe6;
}

/* 新增按钮 */
.btn-add {
    background: #67c23a;
    color: white;
    border: 1px solid #67c23a;
}
/*导出excel按钮*/
.btn-export {
    background-color: #28a745;
    color: white;
    margin-left: 10px;
}

/*以下为表格*/
.table-container {
    width: 100%;
    max-height: 500px;       /* 最大高度 */
    overflow: auto;          /* 自动显示滚动条 */
    margin-top: 10px;
    border: 1px solid #ddd;  /* 添加边框 */
    border-radius: 4px;
    position: relative;      /* 为固定表头定位参考 */
}

.data-table {
    width: max-content;      /* 自动扩展宽度 */
    min-width: 100%;         /* 最小宽度撑满容器 */
    border-collapse: collapse;
    margin: 0;
}

/* 滚动条美化 */
.table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
}
.table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

/* 固定表头 */
.data-table thead {
    position: sticky;
    top: 0;
    background: #fafafa;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.data-table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px;
    border: 1px solid #ddd;
    text-align: center;
    min-width:180px;   /* 设置列最小宽度 */
    width: 0;            /* 触发自动列宽分配 */
}
.data-table th {
    min-width: 180px;   /* 设置列最小宽度 */
    width: 0;            /* 触发自动列宽分配 */
    background: #fafafa;;
    /*background: #f5f7fa;*/
    font-weight: 600;
    color: #303133;
    /*border-bottom: 2px solid #ebeef5;*/
    padding: 8px;
    border: 1px solid #ddd;
    text-align: center;
}
.data-table button{
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.next-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.pre-butto:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.table-disable-btn { background: #ff4d4f; color: white; }
.table-edit-btn { background: #faad14; color: white; }
.table-setting-btn { background: #fa1487; color: white; }
.table-delete-btn { background: #d9d9d9; }
.table-badcar-btn { background: #d9d9d9; }

/*分页器*/
.pagination {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #666;
}

/*部门管理新增弹出页*/
/* 弹窗蒙层 */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* 弹窗内容 */
.modal-content {
    background: white;
    padding: 24px;
    border-radius: 8px;
    width: 480px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 表单项目 */
.modal-form .form-item{
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    position: relative;
}
.modal-form .form-item:first-child label::after {
    content: "*";
    color: #ff4d4f;
    margin-left: 4px;
    vertical-align: middle;
}

.modal-form label {
    flex: 0 0 100px;
    text-align: left;
    color: #333;
    margin-right: 15px;
    font-size: 14px;
}
.modal-form input  {
    width: 60%;
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
}

.modal-form select  {
    width: 60%;
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
}
/* placeholder 文字样式 */
.modal-form input::placeholder {
    color: #999; /* 灰色提示文字 */
}
 /* 弹窗标题 */
.modal-title {
    background: #409eff;
    color: white;
    padding: 15px 20px;
    margin: -24px -24px 20px -24px;
    border-radius: 8px 8px 0 0;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

/* 按钮容器 */
.modal-buttons {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 关闭按钮 */
.modal-close-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

/* 提交按钮 */
.btn-submit {
    background: #409eff;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
}
.btn-close {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 4px;
}

/* 单选按钮组容器 */
.radio-group {
    display: flex;
    gap: 8px;           /* 缩小选项间距 */
    margin-left: auto;  /* 右对齐关键属性 */
    width: 150px;       /* 根据内容调整宽度 */
    padding: 6px 12px;  /* 减少内边距 */
    box-sizing: border-box; /* 包含padding在宽度内 */
    justify-content: flex-end; /* 右侧对齐 */
    margin-right: 0;    /* 移除额外右边距 */
}

/* 单选按钮标签 */
.radio-group label {
    display: flex;
    align-items: center;
    gap: 4px;           /* 缩小图标文字间距 */
    font-size: 14px;    /* 统一字体大小 */
    white-space: nowrap;/* 防止文字换行 */
}

/* 保持与输入框相同的边框样式 */
.radio-group {
    border: none;        /* 移除透明边框 */
}
/* 多选组件样式 */
.multi-select {
    width: 60%;
    margin-left: auto;
    position: relative;
}

.selected-box {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    background: white;
    min-height: 36px;
}

.selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.selected-item {
    background: #f0f2f5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.options-container {
    padding: 0; /* 移除内边距 */
    display: none;
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
}

/* 修改后的选项项样式 */
.option-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: flex-start; /* 左对齐关键属性 */
    text-align: left; /* 文字左对齐 */
    margin: 0; /* 去除默认外边距 */
    padding: 8px 12px; /* 保持原有垂直间距 */
    width: 100%; /* 撑满容器宽度 */
    box-sizing: border-box; /* 包含padding */
}

.option-item:hover {
    background: #f5f5f5;
}

.option-item input {
    margin-right: 8px;
    flex-shrink: 0; /* 防止复选框被压缩 */
}

/* 复选框样式 */
.checkbox-ports {
    position: absolute;
    width: 16px !important;  /* 统一宽度 */
    height: 16px !important; /* 统一高度 */
    /*appearance: none; !* 移除默认样式 *!*/
    border: 1px solid #dcdfe6; /* 自定义边框 */
    border-radius: 3px; /* 圆角匹配整体风格 */
    vertical-align: middle; /* 垂直对齐文字 */
    /*position: relative;*/
    cursor: pointer;
}

/*!* 选中状态样式 *!*/
/*.checkbox-ports:checked {*/
/*    background: #409eff; !* 主色背景 *!*/
/*    border-color: #409eff;*/
/*}*/

/* 选中图标 */
.checkbox-ports:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 选中项删除按钮样式 */
.remove-btn {
    margin-left: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f56c6c;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    line-height: 1;
    border: none;
}

.checkbox-ports-text {
   margin-left: 25px;
}

/*用户管理详情页*/
/* 详情弹窗样式 */
#modal-mask-detail .modal-content {
    width: 600px;
    background: #fff;
    border-radius: 4px;
}

.detail-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

.detail-subtitle {
    color: #2d8cf0;
    margin: 0 0 10px 0;
    font-size: 14px;
}

.detail-row {
    display: flex;
    margin-bottom: 8px;
    line-height: 24px;
}

.detail-label {
    width: 120px;   
    color: #666;
    flex-shrink: 0;
}

.detail-value {
    color: #333;
    flex-grow: 1;
}

.detail-logs {
    color: #999;
    font-size: 13px;
}

/* 委托商管理相关样式 */
.form-item.readonly {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-item.readonly label {
    width: 100px;
    text-align: right;
    margin-right: 10px;
}

.form-item.readonly span {
    flex: 1;
    padding: 5px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 4px;
}

/* 操作记录样式 */
.log-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.log-item span {
    margin-right: 15px;
}

.log-type {
    color: #409eff;
    font-weight: 500;
}

.no-data {
    color: #999;
    text-align: center;
    padding: 20px;
}

/* 修改弹窗样式 */
#modal-mask-update .modal-content {
    width: 500px;
}

#modal-mask-update .form-item {
    margin-bottom: 15px;
}

#modal-mask-update label {
    width: 100px;
    text-align: right;
    margin-right: 10px;
}

#modal-mask-update input {
    flex: 1;
    padding: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}

#modal-mask-update input:focus {
    border-color: #409eff;
    outline: none;
}

#modal-mask-update .modal-buttons {
    margin-top: 20px;
    text-align: right;
}

#modal-mask-update .btn-submit {
    background: #409eff;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

#modal-mask-update .btn-close {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.form-item.readonly {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.form-item.readonly label {
    width: 100px;
    text-align: right;
    margin-right: 10px;
}
.form-item.readonly span {
    flex: 1;
    padding: 5px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.tab-container {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #f5f7fa;
    color: #606266;
}

.tab-button.active {
    background: #409eff;
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/*车辆管理新增样式*/
/* 新增车辆弹窗样式统一调整 */
#modal-mask-add .modal-content {
    width: 520px; /* 与修改弹窗保持相同宽度 */
    padding: 20px;
}

#modal-mask-add .modal-title {
    background: #409eff;
    margin: -20px -20px 20px -20px;
}

#modal-mask-add .form-item {
    margin-bottom: 16px;
}

#modal-mask-add label {
    width: 100px;
    text-align: right;
    margin-right: 12px;
    font-size: 13px;
    color: #606266;
}

/*#modal-mask-add .form-input {*/
/*    flex: 1;*/
/*    padding: 8px 12px;*/
/*    border-color: #e4e7ed;*/
/*}*/

/* 尺寸输入组优化 */
#modal-mask-add .dimension-group {
    gap: 6px;
}
/*#modal-mask-add .dimension-group .form-input {*/
/*    flex: 1;*/
/*    min-width: 80px;*/
/*    padding: 8px 10px;*/
/*}*/

/* 运输能力字段对齐 */
#modal-mask-add .form-row:nth-child(5) .form-item {
    flex: 1;
}

/* 必填项标识 */
#modal-mask-add .form-item[required] label::after {
    content: "*";
    color: #ff4d4f;
    margin-left: 4px;
}

/* 按钮样式统一 */
#modal-mask-add .btn-submit {
    background: #409eff;
    border: 1px solid #d9d9d9;
}

#modal-mask-add .btn-close {
    border-color: #d9d9d9;
}
#modal-mask-add .modal-title {
    background: #409eff;
}
#modal-mask-add .modal-content {
    width: 520px; /* 与修改弹窗同宽 */
    padding: 20px; /* 统一内边距 */
}
/*#modal-mask-add .form-input {*/
/*    border-color: #e4e7ed; !* 与查询表单相同边框色 *!*/
/*}*/
#modal-mask-add .modal-buttons {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* 与详情弹窗相同分割线 */
}
#modal-mask-add .form-item[required] label::after {
    content: "*";
    color: #ff4d4f;
}
.modal-form .form-item select {
    width: 200px;        /* 继承自.form-input的宽度 */
    padding: 8px 12px;    /* 与输入框相同内边距 */
    border: 1px solid #dcdfe6; /* 统一边框样式 */
    border-radius: 4px;  /* 圆角一致 */
    margin-left: auto;   /* 实现右对齐 */
}
/* 在原有样式基础上新增 */
#parent-area-container {
    display: flex !important; /* 强制保持flex布局 */
    align-items: center;
    width: 100%; /* 确保容器宽度足够 */
}
#parent-area-select {
    width: 200px !important; /* 强制保持宽度 */
    min-width: 200px; /* 防止内容撑开 */
    margin-left: auto;
    box-sizing: border-box; /* 包含padding和border */
}

.tree{
    margin: 10px 25px 10px 10px;    /* 上下10px 左右15px */
    width: calc(100% - 30px); /* 自动宽度计算 */
    height: 400px; /* 固定高度 */
    border: 1px solid #eee;
    border-radius: 4px;
    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
    border: 1px solid #ddd; /* 可选边框 */
    padding: 0px; /* 可选内边距 */
}

/* 树容器 */
/*#ID-tree-demo-showCheckbox.tree {*/
/*    margin: 10px 25px 10px 10px;    !* 上下10px 左右15px *!*/
/*    width: calc(100% - 30px); !* 自动宽度计算 *!*/
/*    height: 400px; !* 固定高度 *!*/
/*    border: 1px solid #eee;*/
/*    border-radius: 4px;*/
/*    overflow-y: auto; !* 垂直方向超出时显示滚动条 *!*/
/*    border: 1px solid #ddd; !* 可选边框 *!*/
/*    padding: 10px; !* 可选内边距 *!*/
/*}*/